<template>
  <div v-dialog-drag>
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :show-close="true"
      @close="close"
    >

      <el-descriptions :column="1" >
        <el-descriptions-item label="模板名称">{{ ruleForm.name }}</el-descriptions-item>
        <el-descriptions-item label="报警类型">
          <el-tag size="small">{{ ruleForm.type === 1 ? '数据匹配' : '设备上报' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="参考模板">{{temDetail.temp_name}}</el-descriptions-item>
        <el-descriptions-item label="参数">
          <span v-for='item in paramsArr' :key='item' style='margin-right: 2px'>{{item}} </span>
        </el-descriptions-item>
        <el-descriptions-item label="配置参数">
          <template  v-if="ruleForm.type === 1">
            <el-table
              :data="ruleForm.tem_child"
              border
              size="mini"
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                label="级别"
                align="center"
                width="100">
              </el-table-column>
              <el-table-column
                prop="label_name"
                align="center"
                label="名称"
                width="200">
              </el-table-column>
              <el-table-column
                prop="start"
                align="center"
                label="最小值"
                width="100">
              </el-table-column>
              <el-table-column
                prop="end"
                align="center"
                label="最大值"
                width="100">
              </el-table-column>
            </el-table>
          </template>
          <template  v-if="ruleForm.type === 2">
            <el-table
              :data="ruleForm.tem_child"
              border
              size="mini"
              style="width: 100%"
            >
              <el-table-column
                prop="label_name"
                align="center"
                label="名称">
              </el-table-column>
              <el-table-column
                prop="name"
                align="center"
                label="报警级别">
              </el-table-column>
              <el-table-column
                prop="end"
                align="center"
                label="阈值">
              </el-table-column>
            </el-table>
          </template>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
  import { detailWarningTem } from '@/api/warning'
  import { detailTemplate } from '@/api/template';
  export default {
    name: "info",
    data() {
      return{
        dialogVisible: false,
        ruleForm: {
          name: '',
          param_tem_id: null, // 参数模板id
          type: 2, // 报警类型: 数据匹配， 2设备上报异常
          tem_child: [] // 模板配置项
        },
        temDetail: {},
        paramsArr: []
      }
    },
    methods: {
      close() {
        this.$emit('resetId')
        this.dialogVisible = false
      },
      open(row) {
        this.dialogVisible = true;
        // 调用详情接口
        detailWarningTem({id: row.id}).then(res => {
          this.ruleForm = res.data;
          console.log('打印数据', this.ruleForm)

          //处理参数数据
          this.paramsArr = [];
          if(this.ruleForm != null && this.ruleForm.tem_child != null) {
            this.ruleForm.tem_child.forEach(item => {
              this.paramsArr.push(item.label_name);
            });
            //快速去重复
            this.paramsArr = new Set(this.paramsArr);

          }
          // 调用参考模板接口
          detailTemplate({id: res.data.param_tem_id}).then(res1 => {
            this.temDetail = res1.data;
            // console.log(res1);
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
